<template>
	<view style="display: flex;flex-direction: column;padding-top: 4rpx;height: 100%;">
		<view class="daohanglan uni-flex">
			<view class="" style="height: 64rpx;">
				<view :class="['title-text',selected==0?'text-selected':'text-no-selected']" @tap="dianji(0)">审核中</view>
				<view :class="[selected==0?'selected':'hide']"></view>
			</view>
			<view class="" style="height: 64rpx;">
				<view :class="['title-text',selected==1?'text-selected':'text-no-selected']"  @tap="dianji(1)">已完成</view>
				<view :class="[selected==1?'selected':'hide']"></view>
			</view>
			<view class="" style="height: 64rpx;">
				<view :class="['title-text',selected==2?'text-selected':'text-no-selected']"  @tap="dianji(2)">已取消</view>
				<view :class="[selected==2?'selected':'hide']"></view>
			</view>
		</view>
		<view class="" style="flex: 1;overflow-y: scroll;">
			<view :class="[selected==0?'':'hide','','content']">
				
				<view class="" v-if="list0.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
					<image  src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
					暂无数据
				</view>
				
				<view class="card" @tap="$util.toUrl('./taskInfo?id='+item.id)" v-for="(item,index) in list0" :key="item.id">
					<view class="oneTui uni-flex">
						<view class="" style="position: relative;margin-right: 16rpx;">
							<view class="touxiang">
								<image :src="$jiekou.uploadBaseUrl+item.head" mode="" class=""></image>
							</view>
							<view class=" yuandian "></view>
						</view>
						
						<view class="neirong">
							<view class="uni-flex">
								<text class="user-name">{{item.username}}</text>
								<image src="../../static/image/yirenzheng.png" v-if="item.attestation==2" mode="" class="renzhengtu"></image>
							</view>
							<view class="biaoqians uni-flex">
								<view class="biaoqian">商家ID：{{item.shangjia_id}}</view>
								<view class="biaoqian" v-if="item.tuanduiid != undefined && item.tuanduiid != ''">团队ID：{{item.tuanduiid}}</view>
							</view>
						</view>
					</view>
					<view class="user-info">
						<view class="xinxishuoming">
							<view class="pingtai">购物平台</view>
							<view class="jingdong">{{item.pingtaiStr}}</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">商品价格</view>
							<view class="jingdong">¥{{item.price}}</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">佣金</view>
							<view class="jingdong">¥{{item.yongjin}}</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">截止日期</view>
							<view class="jingdong">{{item.jiezhi_time | dateFormat('YYYY年mm月dd日')}}</view>
						</view>
					</view>
					<view class="status-css">审核中</view>
				</view>
			</view>
			<view :class="[selected==1?'':'hide','content']">
				
				
				<view class="" v-if="list1.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
					<image  src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
					暂无数据
				</view>
				
				<view class="card" @tap="$util.toUrl('./taskInfo?id='+item.id)" v-for="(item,index) in list1" :key="item.id">
					<view class="oneTui uni-flex">
						<view class="" style="position: relative;margin-right: 16rpx;">
							<view class="touxiang">
								<image :src="$jiekou.uploadBaseUrl+item.head"  mode="" class=""></image>
							</view>
							<view class=" yuandian "></view>
						</view>
						
						<view class="neirong">
							<view class="uni-flex">
								<text class="user-name">{{item.username}}</text>
								<image src="../../static/image/yirenzheng.png" v-if="item.attestation==2" mode="" class="renzhengtu"></image>
							</view>
							<view class="biaoqians uni-flex">
								<view class="biaoqian">商家ID：{{item.shangjia_id}}</view>
								<view class="biaoqian" v-if="item.tuanduiid != undefined && item.tuanduiid != ''">团队ID：{{item.tuanduiid}}</view>
							</view>
						</view>
					</view>
					<view class="user-info">
						<view class="xinxishuoming">
							<view class="pingtai">购物平台</view>
							<view class="jingdong">{{item.pingtaiStr}}</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">商品价格</view>
							<view class="jingdong">¥{{item.price}}</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">佣金</view>
							<view class="jingdong">¥{{item.yongjin}}</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">截止日期</view>
							<view class="jingdong">{{item.jiezhi_time | dateFormat('YYYY年mm月dd日')}}</view>
						</view>
					</view>
					<view class="status-css">已完成</view>
				</view>
				<!-- <view class="card" @tap="$util.toUrl('./shiyonginfo')">
					<view class="oneTui uni-flex">
						<view class="" style="position: relative;margin-right: 16rpx;">
							<view class="touxiang">
								<image src="../../static/image/shouchi.png" mode="" class=""></image>
							</view>
							<view class=" yuandian "></view>
						</view>
						
						<view class="neirong">
							<view class="uni-flex">
								<text class="user-name">鱼汤没有鱼</text>
								<image src="../../static/image/yirenzheng.png" mode="" class="renzhengtu"></image>
							</view>
							<view class="biaoqians uni-flex">
								<view class="biaoqian">商家ID：23452</view>
								<view class="biaoqian">团队ID：23452</view>
							</view>
						</view>
					</view>
					<view class="user-info">
						<view class="xinxishuoming">
							<view class="pingtai">购物平台</view>
							<view class="jingdong">京东</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">商品价格</view>
							<view class="jingdong">¥120.00</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">所需单数</view>
							<view class="jingdong">158单</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">截止日期</view>
							<view class="jingdong">2020-09-08 17:20</view>
						</view>
					</view>
					<view class="status-css">已完成</view>
				</view> -->
				<!-- <view class="card" @tap="$util.toUrl('./shiyonginfo')">
					<view class="oneTui uni-flex">
						<view class="" style="position: relative;margin-right: 16rpx;">
							<view class="touxiang">
								<image src="../../static/image/shouchi.png" mode="" class=""></image>
							</view>
							<view class=" yuandian "></view>
						</view>
						
						<view class="neirong">
							<view class="uni-flex">
								<text class="user-name">鱼汤没有鱼</text>
								<image src="../../static/image/yirenzheng.png" mode="" class="renzhengtu"></image>
							</view>
							<view class="biaoqians uni-flex">
								<view class="biaoqian">商家ID：23452</view>
								<view class="biaoqian">团队ID：23452</view>
							</view>
						</view>
					</view>
					<view class="user-info">
						<view class="xinxishuoming">
							<view class="pingtai">购物平台</view>
							<view class="jingdong">京东</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">商品价格</view>
							<view class="jingdong">¥120.00</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">所需单数</view>
							<view class="jingdong">158单</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">截止日期</view>
							<view class="jingdong">2020-09-08 17:20</view>
						</view>
					</view>
					<view class="status-css">已完成</view>
				</view> -->
			</view>
			<view :class="[selected==2?'':'hide','content']">
				
				<view class="" v-if="list2.length==0" style="position: absolute;margin: auto;top:300rpx;left: 0;right: 0;width: 300rpx;text-align: center;">
					<image  src="../../static/image/nodata1.png" mode="" style="width: 300rpx;height: 200rpx;"></image>
					暂无数据
				</view>
				
				<view class="card" @tap="$util.toUrl('./taskInfo?id='+item.id)"  v-for="(item,index) in list2" :key="item.id">
					<view class="oneTui uni-flex">
						<view class="" style="position: relative;margin-right: 16rpx;">
							<view class="touxiang">
								<image :src="$jiekou.uploadBaseUrl+item.head" mode="" class=""></image>
							</view>
							<view class=" yuandian "></view>
						</view>
						
						<view class="neirong">
							<view class="uni-flex">
								<text class="user-name">{{item.username}}</text>
								<image src="../../static/image/yirenzheng.png" v-if="item.attestation==2" mode="" class="renzhengtu"></image>
							</view>
							<view class="biaoqians uni-flex">
								<view class="biaoqian">商家ID：{{item.shangjia_id}}</view>
								<view class="biaoqian" v-if="item.tuanduiid != undefined && item.tuanduiid != ''">团队ID：{{item.tuanduiid}}</view>
							</view>
						</view>
					</view>
					<view class="user-info">
						<view class="xinxishuoming">
							<view class="pingtai">购物平台</view>
							<view class="jingdong">{{item.pingtaiStr}}</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">商品价格</view>
							<view class="jingdong">¥{{item.price}}</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">佣金</view>
							<view class="jingdong">¥{{item.yongjin}}</view>
						</view>
						<view class="xinxishuoming">
							<view class="pingtai">截止日期</view>
							<view class="jingdong">{{item.jiezhi_time | dateFormat('YYYY年mm月dd日')}}</view>
						</view>
					</view>
					<view class="status-css">已取消</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js';
	export default {
		data() {
			return {
				selected:"0",
				userId:uni.getStorageSync("token"),
				pageNo:1,
				pageSize:15,
				taskMyStatus:1,
				list0:[],
				list1:[],
				list2:[]
			}
		},
		onLoad:function(){
			var that = this;
			that.$util.nuiAjax(that.$jiekou.selectTaskMyList,{pageNo:that.pageNo,pageSize:that.pageSize,taskMyStatus:that.taskMyStatus,uid:that.userId},function(res){
				console.log(JSON.stringify(res));
				that.list0 = res.list;
			});
			
			uni.$on("reloadMy",function(){
				that.pageNo = 1;
				that.$util.nuiAjax(that.$jiekou.selectTaskMyList,{pageNo:that.pageNo,pageSize:that.pageSize,taskMyStatus:that.taskMyStatus,uid:that.userId},function(res){
					
					that["list"+that.selected] = res.list;
				});
			})
		},
		methods: {
			dianji:function(index){
				var that = this;
				this.selected = index;
				that.pageNo = 1;
				that.pageSize = 15;
				if(index==0){
					that.taskMyStatus = 1;
				}else if(index==1){
					that.taskMyStatus = 2;
				}else if(index==2){
					that.taskMyStatus = 3;
				}
				that.$util.nuiAjax(that.$jiekou.selectTaskMyList,{pageNo:that.pageNo,pageSize:that.pageSize,taskMyStatus:that.taskMyStatus,uid:that.userId},function(res){
					console.log(JSON.stringify(res));
					that["list"+index] = res.list;
				});
			}
		},
		filters:{
			dateFormat:(date,str)=>{
				if(date!=undefined){
					return util.dateUtils.dateFormat('YYYY年mm月dd日',new Date(date));
				}else{
					return util.dateUtils.dateFormat('YYYY年mm月dd日',date);
				}
			}
		}
	}
</script>

<style lang="scss">
	.status-css{
		// height:40rpx;
		font-size:28rpx;
		font-weight:500;
		color:rgba(255,77,77,1);
		line-height:40rpx;
		padding-top: 30rpx;
		text-align: right;
	}
	.oneTui .zaixian{
		background-color: #10C82E;
	}
	.yuandian{
		position: absolute;
		width: 24rpx;
		height: 24rpx;
		border-radius:24rpx;
		background-color: #818181;
		right: 0;
		bottom: 4rpx;
		
	}
	.xinxishuoming{
		padding-top: 24rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}
	.pingtai{
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(153,153,153,1);
		line-height:40rpx;
	}
	.jingdong{
		height:40rpx;
		font-size:28rpx;
		font-weight:400;
		color:rgba(51,51,51,1);
		line-height:40rpx;
	}
	.touxiang{
		width: 92rpx;
		height: 92rpx;
		border-radius:50rpx;overflow: hidden;
		
	}
	.touxiang image{
		width: 100%;
		height: 100%;
	}
	.user-name{
		height:44rpx;
		font-size:32rpx;
		font-weight:500;
		color:rgba(25,25,25,1);
		line-height:44rpx;
		padding-right: 8rpx;
	}
	.renzhengtu{
		width: 26rpx;
		height: 32rpx;
		margin-top: 6rpx;
	}
	.biaoqian{
		height:34rpx;
		font-size:24rpx;
		font-weight:400;
		color:$uni-color-primary;
		line-height:34rpx;
		border: 1rpx solid $uni-color-primary;
		border-radius: 4rpx;
		padding: 2rpx 8rpx 0 8rpx;
		margin-right: 8rpx;
	}
	.neirong{
		margin-bottom: 10rpx;
	}
	.oneTui{
		background-color: #FFFFFF;
		padding-bottom: 36rpx;
		border-bottom: 1rpx solid #EEEEEE;
	}
	.content{
		// flex: 1;
		// padding-top: 24rpx;
		padding-left: 30rpx;
		padding-right: 30rpx;
		// overflow: auto;
		// overflow-y: scroll;
		// height: 100%;
		/*解决ios上滑动不流畅*/
		// -webkit-overflow-scrolling: touch;
	}
	.card{
		background-color: #FFFFFF;
		box-shadow:0px 0px 12rpx 0px rgba(240,240,240,0.5);
		border-radius:8rpx;
		padding: 24rpx;
		padding-bottom: 32rpx;
		margin-bottom: 20rpx;
	}
	page{
		background-color: $page-bg-color;
		height: 100%;
	}
	.hide{
		display: none;
	}
	.daohanglan{
		padding:24rpx 0 0 0;
		justify-content: space-around;
		background-color: $uni-text-color-inverse;
		// margin-top: 4rpx;
		margin-bottom: 18rpx;
		box-shadow:0px 8rpx 16rpx 0px rgba(246,247,248,1);
	}
	.selected{
		height:6rpx;
		background:$uni-color-primary;
		width: 100%;
		margin-top: 18rpx;
	}
	.text-selected{
		color:$uni-color-primary;
	}
	.text-no-selected{
		color:#191919;
	}
	.title-text{
		height:40rpx;
		font-size:28rpx;
		font-weight:500;
		line-height:40rpx;
	}
</style>
